﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ImagesByAlbum.ascx.cs"
    Inherits="Controls_ImagesByAlbum" %>
<link href="<%= Page.ResolveUrl("~/css/dmspopup.css") %>" rel="stylesheet" type="text/css" />
<script src="<%= KTFrameworkCus.Globals.ApplicationPath %>dms/jsWatermark/jquery.data.js"
    type="text/javascript"></script>
<script src="<%= KTFrameworkCus.Globals.ApplicationPath %>dms/jsWatermark/jquery.watermark.min.js"
    type="text/javascript"></script>
<script src="<%= KTFrameworkCus.Globals.ApplicationPath %>dms/jsWatermark/jquery.watermark.js"
    type="text/javascript"></script>
<script src="<%= KTFrameworkCus.Globals.ApplicationPath %>js/dmspopup.js" type="text/javascript"></script>
<script type="text/javascript">

    function getPageScroll() {
        var xScroll, yScroll;
        if (self.pageYOffset) {
            yScroll = self.pageYOffset;
            xScroll = self.pageXOffset;
        } else if (document.documentElement && document.documentElement.scrollTop) {	 // Explorer 6 Strict
            yScroll = document.documentElement.scrollTop;
            xScroll = document.documentElement.scrollLeft;
        } else if (document.body) {// all other Explorers
            yScroll = document.body.scrollTop;
            xScroll = document.body.scrollLeft;
        }
        return new Array(xScroll, yScroll)
    }

    function getPageHeight() {
        var windowHeight
        if (self.innerHeight) {	// all except Explorer
            windowHeight = self.innerHeight;
        } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
            windowHeight = document.documentElement.clientHeight;
        } else if (document.body) { // other Explorers
            windowHeight = document.body.clientHeight;
        }
        return windowHeight
    }


    $(function () {
        $(".info > .tenhinh").watermark("Tên tập tin...", "watermark2");
        $(".info > .tenhinhen").watermark("File name...", "watermark2");
        $(".info > .mota").watermark("Mô tả...", "watermark2");
        $(".info > .motaen").watermark("Description...", "watermark2");
        $(".info > .url").watermark("Liên kết...", "watermark2");
    });

    $(document).ready(function () {
        if ($.trim($(".hfimageid").val()) != "") {
            var imageid = $.trim($(".hfimageid").val());
            var imageurl = $("#dmsImageID-" + imageid).children('.dms-Image-wrapper').children('.dms-Image-Link').children('span').attr('style');
            $(".imagetoedit").attr('style', imageurl + ";width:170px; height:130px; display:block;");
            $(".imagedit").fadeIn();
            $(".imagedit").css({
                top: getPageScroll()[1] + (getPageHeight() / 10),
                left: $(window).width() / 2 - 205
            }).show();
        }
        var windowW = $(document).width();
        var heightH = $(window).height();
        $(".group1").colorbox({ rel: 'group1',
            maxWidth: windowW,
            maxHeight: heightH

        });

        $(".iframe").colorbox({ iframe: true, width: "710px", height: "570px" });

        //$(".ajax").colorbox();
        $('.dms-Image-Link').hover(function () {
            $(this).css('border', 'solid 1px #8FD2FF');
            //                $(this).parent().parent().children('.ImageInsideControl').show();
        }, function () {
            $(this).css('border', 'solid 1px #E6E6E6');
            //                $(this).parent().parent().children('.AlbumInsideControl').hide();
        });
        $(".dms-Image-list li").hover(function () {
            if ($(this).children(".ImageInsideControl").children("input[type='checkbox']").attr("checked")) {
                return;
            }
            $(this).children('.ImageInsideControl').show();
        }, function () {
            if ($(this).children(".ImageInsideControl").children("input[type='checkbox']").attr("checked")) {
                return;
            }
            $(this).children('.ImageInsideControl').hide();
        });

        $('.ImageInsideControl input[type="checkbox"]').click(function () {
            if ($(this).attr("checked")) {
                $(this).parent().show();
            }
        });


        //save info
        $(".btnsaves").click(function () {
            var imageid = $(this).parent().parent().children('#hfImageID').val();
            var title = $(this).parent().parent().children('#txttenhinh').val();
            var title_en = $(this).parent().parent().children('#txttenhinh_en').val();
            var description = $(this).parent().parent().children('#txtmota').val();
            var description_en = $(this).parent().parent().children('#txtmota_en').val();
            var url = $(this).parent().parent().children('#txturl').val();
            var active = 0;
            if ($(this).parent().parent().children('.cont').children('#ckActive').attr('checked')) {
                active = 1;
            }

            var strURL = "<%= KTFrameworkCus.Globals.ApplicationPath %>dms/Ajax/dms-Ajax.asmx/UpdateImageInfo";
            $.ajax({
                url: strURL,
                type: 'POST',
                data: "imageid=" + imageid + "&title=" + title + "&title_en=" + title_en + "&des=" + description + "&des_en=" + description_en + "&url=" + url + "&active=" + active,
                datatype: "Text",
                success: function (msg) {
                    var mess = $(msg).find('string').text();
                    if (mess == "Done") {
                        $(".donespan-" + imageid).show().delay(1000).fadeOut(400);
                    }
                }
            });
        });

        $('input[type="checkbox"][checked="unc"]').removeAttr('checked');
        var i = 0;
        $(".hpr").click(function () {
            if (i == 0) {
                $(".info").slideToggle();
                $(this).html("Ẩn thuộc tính");
                i = 1;
                return false;
            }
            if (i == 1) {
                $(".info").slideToggle();
                $(this).html("Hiện thuộc tính");
                i = 0;
                return false;
            }

        });

        $(".btnremove").click(function () {
            var answer = confirm("Bạn muốn xóa tập tin này chứ ?")
            if (answer) {
                var imageid = $(this).parent().parent().children('#hfImageID').val();
                var strURL = "<%= KTFrameworkCus.Globals.ApplicationPath %>dms/Ajax/dms-Ajax.asmx/deleteImage";
                $.ajax({
                    url: strURL,
                    type: 'POST',
                    data: "imageid=" + imageid + ",",
                    datatype: "Text",
                    success: function (msg) {
                        var mess = $(msg).find('string').text();
                        if (mess.indexOf(',') > -1) {
                            var list = mess.split(',');
                            for (var i = 0; i < list.length - 1; i++) {
                                $("#dmsImageID-" + list[i]).fadeOut(400, function () {
                                    $(this).remove();
                                });

                                //.fadeOut(400).delay(400).remove();
                                //alert(list[i]);
                            }
                        }
                        else {
                            alert('Có lỗi xảy ra!')
                        }
                    }

                });
            }
            return false;
        })

    });
</script>
<script type="text/javascript">
    $(function () {
        $('#sortable').sortable({
            placeholder: 'ui-state-highlight',
            update: OnSortableUpdate
        });
        //$('#sortable').disableSelection();

        var progressMessage = 'Saving changes... <img src="dms/loader.gif"/>';
        var successMessage = 'Saved successfully!';
        var errorMessage = 'There was some error in processing your request';
        var messageContainer = $('#message').find('p');

        function OnSortableUpdate(event, ui) {
            var order = $('#sortable').sortable('toArray').join(',').replace(/id_/gi, '')
            //console.info(order);

            $(".loading").show();

            $.ajax({
                type: 'POST',
                url: '<%= KTFrameworkCus.Globals.ApplicationPath %>dms/Ajax/ReOrder.asmx/updateImage',
                data: '{itemOrder: \'' + order + '\'}',
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: OnSortableUpdateSuccess,
                error: OnSortableUpdateError
            });
        }

        function OnSortableUpdateSuccess(response) {
            $(".loading").hide();
        }

        function OnSortableUpdateError(xhr, ajaxOptions, thrownError) {

        }

    });
 
</script>
<div class="globalcontrol" style="margin-bottom: 10px; height: 30px;">
    <a href="#HideProperties" class="hpr" style="display: block; height: 30px; padding: 0 20px;
        -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #000000;
        border: solid 1px #BFBFBF; float: left; line-height: 30px;">Hiện thuộc tính</a>
</div>
<div style="clear: both;">
</div>
<div class="dms-Gallery-Image-List">
    <ul class="dms-Image-list" id="sortable">
        <asp:Repeater ID="dtlImages" runat="server">
            <ItemTemplate>
                <li id='dmsImageID-<%# Eval("id") %>' class="dms-Image-Poster ui-state-default">
                    <div class="ImageInsideControl">
                        <input type="checkbox" id='ckdelte-<%# Eval("id") %>' name='ckdelte-<%# Eval("id") %>'
                            value='<%# Eval("id") %>' />
                        <a href="#imagedit-<%# Eval("id") %>" class="editimage">Đổi hình</a>
                    </div>
                    <div class="dms-Image-wrapper">
                        <a href='<%= KTFrameworkCus.Globals.ApplicationPath %><%# Eval("type").ToString()=="image"?"dms/Images/f/"+Eval("fullimage"):"dms/VideoState.aspx?fn="+ Eval("fullimage") %>'
                            class='<%# Eval("type").ToString()=="image"?"dms-Image-Link group1 ajax":"dms-Image-Link iframe" %>'>
                            <span style='background: url(<%= KTFrameworkCus.Globals.ApplicationPath %>dms/Images/t/<%# Eval("thumbimage") %>) 0 0;'>
                            </span></a>
                        <div class="info" style="display: none;">
                            <input type="hidden" id="hfImageID" value='<%# Eval("id") %>' />
                            <input type="text" id="txttenhinh" class="tenhinh" value='<%# Eval("title") %>' style="width: 174px;" />
                            <input type="text" id="txttenhinh_en" class="tenhinhen" value='<%# Eval("title_en") %>'
                                style="width: 174px;" />
                            <input type="text" id="txtmota" class="mota" value='<%# Eval("description") %>' style="width: 174px;" />
                            <input type="text" id="txtmota_en" class="motaen" value='<%# Eval("description_en") %>'
                                style="width: 174px;" />
                            <input type="text" id="txturl" class="url" value='<%# Eval("url") %>' style="width: 174px;" />
                            <div style="position: relative;" class="cont">
                                <input type="checkbox" id="ckActive" checked='<%# Eval("active").ToString()=="1"?"Checked":"unc" %>' />
                                <label>
                                    Active</label>
                                <span class='donespan-<%# Eval("id") %>' style="color: #03C400; font-weight: bold;
                                    position: absolute; right: 35px; top: 3px; display: none;">Done!</span>
                                <img class="btnsaves" alt="Save" title="Save" style="position: absolute; right: 16px;
                                    top: 3px;" src="<%= KTFrameworkCus.Globals.ApplicationPath %>images/check_on.gif" />
                                <img class="btnremove" alt="Remove" title="Remove" style="position: absolute; right: 0;
                                    top: 2px;" src="<%= KTFrameworkCus.Globals.ApplicationPath %>images/remove-row.gif" />
                            </div>
                        </div>
                    </div>
                </li>
            </ItemTemplate>
        </asp:Repeater>
    </ul>
    <div class="imagedit facebox" style="display: none;">
        <div class="popup">
            <div class="content" style="width:auto !important;">
                <input id="hfimageid" class="hfimageid" runat="server" type="hidden" />
                <a style="padding:3px; border:solid 1px #ccc; display:block; float:left;">
                <span class="imagetoedit"></span></a>
                <div style="clear:both;"></div>
                <asp:FileUpload ID="FileUpload2" runat="server" /><br />
                <asp:CheckBox ID="ckChapNhan" Text="Đồng ý thay đổi" runat="server" />
                <asp:Button ID="Button1" runat="server" Text="Thay đổi" OnClick="Button1_Click" /><br />
                <asp:Label ID="lbmess" runat="server" Font-Bold="True" Font-Size="10px" ForeColor="Red"></asp:Label>
            </div>
            <a class="CloseImageChange" href="#CloseImageChange">
                <img class="close_image" alt="close" src="<%= Page.ResolveUrl("~/images/closelabel.png") %>" /></a>
        </div>
    </div>
</div>
<div class="dms-Gallery-Control">
    <div id="fileupload">
        <div style="margin-bottom: 10px;">
            <select id="ddlACtion" style="height: 23px;">
                <option value="0" selected="selected">Chọn thao tác</option>
                <option value="1">Xóa những hình đã chọn</option>
                <option value="2">Di chuyển sang Album khác</option>
            </select>
            <asp:DropDownList ID="ddlAlbum" runat="server" Style="height: 23px; display: none;">
            </asp:DropDownList>
            <input id="btnAction" value="Thực hiện" style="border: 0pt none; color: rgb(255, 255, 255);
                border-radius: 3px 3px 3px 3px; background-color: rgb(94, 94, 94); font-size: 12px;
                vertical-align: middle; height: 23px; padding-bottom: 4px; text-align: center;" />
            <input type="checkbox" id="ckAll" />
            Chọn tất cả
            <img id="loaderimg" style="display: none;" src="<%= KTFrameworkCus.Globals.ApplicationPath %>dms/ajax-loader_3.gif" />
        </div>
        <div style="margin-bottom: 10px;">
            Chỉ chấp nhận Tập tin ảnh: *.JPEG; *.JPG; *.PNG<br />
            Chỉ chấp nhận Tập tin Video: *.FLV<br />
        </div>
        <asp:FileUpload ID="FileUpload1" runat="server" />
    </div>
</div>
<%
    string albumid = HttpContext.Current.Request.QueryString["aid"];
%>
<script type="text/javascript">
    /*

    $('#file_upload').uploadify({
    'uploader' : '/uploadify/uploadify.php',
    'swf' : '/uploadify/uploadify.swf',
    'cancelImage' : '/uploadify/uploadify-cancel.png',
    'auto' : true
    });

    */

    function reload() {    
        var strURL = "<%= KTFrameworkCus.Globals.ApplicationPath %>dms/Ajax/dms-Ajax.asmx/GetImages";
        $.ajax({
            type: "POST",
            url: strURL,
            data: "{albumid:'"+<%= albumid %>+"'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) { 
            //var data = eval("(" + msg.d + ")");   
            //alert(msg.d);       
            //$(".dms-Gallery-Image-List > ul").empty();
//               $.each(data, function(rec) {
//               //alert(this.ImageID);
//               //alert($("#dmsImageID-"+this.ImageID).length>0)
//                if (($("#dmsImageID-"+this.ImageID).length>0)==false) {
//                    $(".dms-Gallery-Image-List > ul").append("<li "
//                    +"id='dmsImageID-"+this.ImageID+"' class='dms-Image-Poster ui-state-default'"
//                    +">"  
//                    +"<div class='ImageInsideControl'>"
//                    +"<input type='checkbox' id='ckdelte-"+this.ImageID+"' name='ckdelte-"+this.ImageID+"' value='"+this.ImageID+"' />"
//                    +"</div>"
//                    +"<div class='dms-Image-wrapper'>"
//                    +"<a href='#"+this.ImageID+"' class='dms-Image-Link'><span style='background: url(<%= KTFrameworkCus.Globals.ApplicationPath %>dms/Images/t/"+this.ThumbImage+") 0 0;'>"
//                    +"</span></a>"
//                    +"</div>"                  
//                    +"</li>").fadeIn(300);
//                }
//               });
                location.reload();
             } 
        });
    }
    $(document).ready(function () {
        
        var ImageSelected = "";
        var option = 0;
        $("#ddlACtion").change(function () {
            //alert($(this).val());
            option = $(this).val();
            if (option == 2) {
                $("#<%=ddlAlbum.ClientID %>").fadeIn(400);
            }
        });
        $("#ckAll").click(function () {
            if ($("#ckAll").attr("checked")) {
                $('.ImageInsideControl input[type="checkbox"]').attr('checked', 'checked');
                $('.ImageInsideControl').show();
            }
            else {
                $('.ImageInsideControl input[type="checkbox"]').removeAttr('checked');
                $('.ImageInsideControl').hide();
            }

        });



        $("#btnAction").click(function () {
            $('.ImageInsideControl input[type="checkbox"]').each(function () {
                if ($(this).attr("checked")) {
                    ImageSelected = ImageSelected + $(this).val() + ',';
                }

            });
            if (option == 1) {
                var strURL = "<%= KTFrameworkCus.Globals.ApplicationPath %>dms/Ajax/dms-Ajax.asmx/deleteImage";
                $.ajax({
                    url: strURL,
                    type: 'POST',
                    data: "imageid=" + ImageSelected,
                    datatype: "Text",
                    success: function (msg) {
                        var mess = $(msg).find('string').text();
                        if (mess.indexOf(',') > -1) {
                            var list = mess.split(',');
                            for (var i = 0; i < list.length - 1; i++) {
                                $("#dmsImageID-" + list[i]).fadeOut(400, function () {
                                    $(this).remove();
                                });

                                //.fadeOut(400).delay(400).remove();
                                //alert(list[i]);
                            }
                        }
                        else {
                            alert('Có lỗi xảy ra!')
                        }
                    }

                });
            }
            if (option == 2) {
                var strURL = "<%= KTFrameworkCus.Globals.ApplicationPath %>dms/Ajax/dms-Ajax.asmx/ChangeAlbum";
                $.ajax({
                    url: strURL,
                    type: 'POST',
                    data: "imageid=" + ImageSelected + "&albumid=" + $("#<%=ddlAlbum.ClientID %>").val(),
                    datatype: "Text",
                    success: function (msg) {
                        var mess = $(msg).find('string').text();
                        if (mess.indexOf(',') > -1) {
                            var list = mess.split(',');
                            for (var i = 0; i < list.length - 1; i++) {
                                $("#dmsImageID-" + list[i]).fadeOut(400, function () {
                                    $(this).remove();
                                });

                                //.fadeOut(400).delay(400).remove();
                                //alert(list[i]);
                            }
                        }
                        else {
                            alert('Có lỗi xảy ra!')
                        }
                    }

                });
            }

        });


        $("#<%=FileUpload1.ClientID %>").uploadify({      
    'uploader'  : '<%= KTFrameworkCus.Globals.ApplicationPath %>dms/Uploadify/uploadify22.swf',
    'script'    : '<%= KTFrameworkCus.Globals.ApplicationPath %>dms/Ajax/ajaxUpload.ashx',
    'cancelImg' : '<%= KTFrameworkCus.Globals.ApplicationPath %>dms/Uploadify/uploadify-cancel.png',    
                'fileExt': '*.jpg;*.jpeg;*.png;*.mp4;*.flv',
            'multi': true,
            'auto': true,
            'scriptData': { 'aid': '<%=albumid %>' },
            'onAllComplete' : function(event,data) {
            reload();
              //alert(data.filesUploaded + ' files uploaded successfully!');
            }
         });
    });
//            'uploader': '/dms/ajaxUpload.ashx',
//            'swf': '/dms/uploadify.swf',
//            'buttonText': 'Chọn tập tin...',
//            'cancelImage': '/dms/uploadify-cancel.png',
//            'fileExt': '*.jpg;*.jpeg;*.png',
//            'multi': true,
//            'auto': true,
//            'postData': { 'aid': '<%=albumid %>' },           
//            'onUploadComplete': function (file, queue) {
//                   
////                for (var name in file) {
////                    alert(name - file[name]);
////                }
//            }



</script>
